<template>
    <div>
        <el-form :model="value" @keyup.enter.native="getDataList()" label-width="70px">
            <el-row :gutter="20">
                <el-col v-for="(item, index) in formList" :key="index" :md="item.md || 6" :sm="item.sm || 6" :class="item.type === 'btn' ? 'btn-right' : ''">
                    <template v-if="item.type === 'btn'">
                        <div class="right-handle-group">
                            <el-button-group>
                                <el-button style="margin-right: 10px" @click="getDataList()" type="primary">{{ $t('query') }}</el-button>
                                <el-button @click="getReset()">{{ $t("reset") }}</el-button>
                            </el-button-group>
                        </div>
                    </template>
                    <template v-else>
                        <el-form-item :label="item.label">
                            <template v-if="item.formType === 'select'">
                                <el-select v-model="value[item.prop]" :title="value[item.prop]" :placeholder="item.placeholder" clearable>
                                    <el-option v-for="(item1, index) in item.options || selectOptions[item.optionProp]" :key="index" :label="item1.dictLabel" :value="item1.dictValue"></el-option>
                                </el-select>
                            </template>
                            <template v-else-if="item.formType === 'date'">
                                <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                                </el-date-picker>
                            </template>
                            <template v-else>
                                <el-input v-model="value[item.prop]" :title="value[item.prop]" :placeholder="item.placeholder" :maxlength="item.maxlength || '20'" clearable></el-input>
                            </template>
                        </el-form-item>
                    </template>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'Search',
        props: {
            value: {
                type: Object,
                default: () => {}
            },
            formList: {
                type: Array,
                default: () => []
            },
            selectOptions: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                pickerOptions: {
                    shortcuts: [
                    {
                        text: "当天",
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setHours(0, 0, 0);

                        picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一周",
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit("pick", [start, end]);
                        },
                    }
                    ]
                },
                dateRange: []
            }
        },
        methods: {
            getDataList() {
                this.$emit('getDataList', this.dateRange)
            },
            getReset() {
                this.$emit('getReset')
            }
        },
    }
</script>

<style scoped>
    .btn-right {
        float: right;
        margin-bottom: 20px;
    }
</style>